import React, { useEffect, useState } from 'react';
import { Form, message, Input, Radio } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { editRemark } from '../service';
import styles from './index.module.less';

const { TextArea } = Input;

export default ({ visible, handleOk, handleCancel, onChange, shopRemark, length, selectedRow }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      form.resetFields();
    }
  }, [visible])

  //校验
  const onOk = () => {
    form.validateFields().then(val => {
      sendData(val)
    })
  }

  const sendData = async (val) => {
    setLoading(true)
    const params = selectedRow.map(item => {
      return Object.assign(item, val)
    })
    const { success } = await editRemark(params)
    if (success) {
      message.success('修改备注成功');
      handleOk()
    }
    setLoading(false);
  }

  const onCancel = () => {
    handleCancel();
    form.resetFields()
  }

  return (
    <CommonModal
      title='修改备注'
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
    >
      <Form
        form={form}
        initialValues={{
          shopRemark,
        }}
        name='store-notes-modal-form'
      >
        {/* 统一添加范围 */}
        {/* <Form.Item label="修改范围" className={styles.textAreaStyle} name='range' rules={[{ required: true, message: '请选择' }]}>
          <Radio.Group>
            <Radio value="apple">针对勾选项</Radio>
            <Radio value="pear">针对筛选项</Radio>
          </Radio.Group>
        </Form.Item> */}
        <div className={styles.textAreaStyle}>
          <Form.Item name='shopRemark' label='修改备注' rules={[{ required: true, message: '请输入备注' }]}>
            <TextArea rows={6} maxLength={100} placeholder='请输入备注,最多可输入100' onChange={onChange} />
          </Form.Item>
          <p>{length}/100</p>
        </div>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  )
}